<template>
    <div class="W100 h100 login_bg">
        <img :src="backImageUrl" alt="" class="W100 h100">

        <div class="login_content   center column">
            <div class="f20 fw500 clr_2b3 column mb20">
                <img :src="imageUrl" alt="" class="w70 h70 mb10">
                <span>患者身份确认</span>
                <!-- <span class="f15 clr_1c8" @click="configSetFn">配置url地址</span> -->

            </div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm w300">
                <el-form-item prop="username">

                    <el-input clearable class="b20" v-model="ruleForm.username">
                        <!-- prefix-icon="el-icon-user-solid" -->
                        <span slot="prefix" class="prefix_iconfont"> <i
                                class="icon iconfont el-input__icon">&#xe702;</i></span>

                    </el-input></el-form-item>
                <el-form-item prop="pass"><el-input   class="b20" :type="psdType"
                        v-model="ruleForm.pass" autocomplete="off">
                        <!-- prefix-icon="el-icon-lock" -->
                        <span slot="prefix" class="prefix_iconfont"> <i
                                class="icon iconfont el-input__icon">&#xe6fa;</i></span>

                        <span slot="suffix" v-if="psdType == 'password'" class="suffix_iconfont"
                            @click="inputTypeChange()"><i
                                class="icon iconfont el-input__icon">&#xe6ff;</i></span>
                        <span slot="suffix" v-else class="suffix_iconfont" @click="inputTypeChange"><i
                                class="icon  iconfont el-input__icon">&#xe6f9;</i></span>

                    </el-input></el-form-item>
                <el-form-item class="tc"><el-button class="b20" type="primary"
                        @click="submitForm('ruleForm')">登录</el-button></el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import store from '@/store'
// 0120 ew123456
import { doLogin } from '@/api/user.js'
export default {
    data() {

        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (value.length < 6) {
                callback(new Error('密码不能小于6位'));
            } else {
                callback();
            }
        };
        var validateUserName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('用户名不能为空'));
            } else {
                callback();
            }

        };

        return {

            psdType: 'password',
            isShowPassword: false,
            backImageUrl: require('@/assets/images/login/login-back.png'),
            imageUrl: require('@/assets/images/login/login-icon.png'),
            ruleForm: {
                username: '8888',
                // '0120',
                pass: 'ew123456',
                // 'ew123456',
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur', message: '请输入密码' }
                ],
                username: [
                    //
                    { required: true, validator: validateUserName, trigger: 'blur', message: '请输入用户名' }
                ],
            },
            configDialog: {
                show: false,
            }
        };
    },
    mounted() {
        this.enterLogin = (e) => {
            console.log(e);
            //兼容数字键盘回车和普通键盘回车
            if (e.key === 'Enter') {
                this.loginOperation(this.ruleForm);
            }

        }
        window.addEventListener('keypress', this.enterLogin);
    },
    beforeDestroy() {
        window.removeEventListener('keypress', this.enterLogin);
    },
    computed: {
    },
    methods: {

        inputTypeChange(){
            console.log('点击的是修改类型');
            this.psdType = this.psdType == 'password' ?"text":'password'
        },
        psdTypeChange() {
            this.isShowPassword = !this.isShowPassword
            this.psdType = this.isShowPassword ? 'text' : 'password'
        },
        loginOperation(ruleForm) {

            // //
            let params = {
                'UserCode': window.btoa(ruleForm.username),
                'UserPassword': window.btoa(ruleForm.pass),//密码base64加密
            }
            doLogin(params).then(([res, err]) => {
                console.log('res结果是', res.code);
                console.log(typeof (res));
                if (err) {
                    this.$message.error('登录失败' + err);
                } else {
                    if (res?.code === 0) {
                        // alert('登录成功')
                        store.commit('user/set_loginInfo', JSON.stringify(res?.Result))
                        store.commit('user/set_loginStatus', true)
                        // this.changeLoginnfo(JSON.stringify(res?.Result));
                        this.$router.push(this.$route.query.redirect || '/');
                    } else {
                        this.$message.error(res?.msg);
                    }

                }
            }).catch(err => {
                // alert(err)
            });

        },
        submitForm(formName) {
            // if(!this.url||this.url == ''){
            //     this.$message.error('请配置url地址','msg')
            //     this.configSetFn()


            //     return 
            // }
            //this.$refs.formName=== 
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loginOperation(this.ruleForm);

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        changeLoginnfo() {

        }
    },
}
</script>
<style lang='less' scoped>
.login_bg {
    // background-image: url('../../assets/images/login/login-back.png');
    // background-size: cover;
    background-color: white;
}

.login_content {
    // position:absolute;
    // left:0;
    // top:0;

    background-color: white;
    box-shadow: 0 0 10px 0 #1c8be433;
    border-radius: 10px;
    padding: 45px 15px;
    width: calc(100% - 50px);

    // .iconfont {
    //     // font-size: 9px;
    //     margin-left: 5px;
    // }
    .el-button {
        width: 100%;
        background-image: linear-gradient(270deg, #1C8BE4 0%, #1C54E4 100%);

    }

    .prefix_iconfont {
        margin-left: 10px;

    }

    .suffix_iconfont {
        margin-right: 5px;

        .iconfont {
            font-size: 8px !important;

        }
    }

    ::v-deep .el-input--suffix .el-input__inner {
        padding-left: 40px;
    }

    ::v-deep .el-input__inner {
        border-radius: 20px;
        background: #F0F4F9;
        border: none;
    }

    ::v-deep .el-input__validateIcon {
        display: none;
    }
}
</style>